<template>
  <div>
    <div
      class="ex-tooltip-input-hidden"
      :class="contentClass"
    >{{value}}</div>
    <div
      v-if="flag"
      @mouseenter="visibilityChange($event)"
      class="ellipsis"
      :class="contentClass"
    >{{value || ''}}</div>
    <el-tooltip
      placement="top"
      :content="value"
      v-else
    >
      <div
        class="ellipsis"
        @mouseenter="visibilityChange($event)"
        :class="contentClass"
      >{{value || ''}}</div>
    </el-tooltip>
  </div>
</template>

<script>

export default {
  props: {
    value: {
      required: true
    },
    contentClass: {
      type: Array
    }
  },
  data() {
    return {
      flag: true
    }
  },
  methods: {
    visibilityChange(event) {
      let ev = event.target
      let thisWidth = ev.offsetWidth
      let wordWidth = ev.previousElementSibling.offsetWidth
      this.flag = thisWidth >= wordWidth
    }
  }
}
</script>
<style lang='less' scoped>
.ex-tooltip-input-hidden {
  position: fixed !important;
  left: -19800px !important;
  width: auto !important;
}
/*显示省略号*/
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>